<template>
  <div class="page-wrap">
    <PiTree :data :props @add="add" @remove="remove" @edit="edit"></PiTree>
  </div>
</template>

<script setup name="piTreePart">
const getKey = (prefix, id) => `${prefix}-${id}`;
const createData = (maxDeep, maxChildren, minNodesNumber, deep = 1, key = 'node') => {
  let id = 0;
  return Array.from({ length: minNodesNumber })
    .fill(deep)
    .map(() => {
      const childrenNumber = deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
      const nodeKey = getKey(key, ++id);
      return {
        id: nodeKey,
        label: nodeKey,
        children: childrenNumber
          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
          : undefined,
      };
    });
};
const data = createData(4, 3, 5);
const props = {
  value: 'id',
  label: 'label',
  children: 'children',
};

const add = (data) => {
  console.log('add', data);
};
const edit = (data) => {
  console.log('edit', data);
};
const remove = (data) => {
  console.log('remove', data);
};
</script>

<style></style>
